<template>
  <div class="home-page">
    <div></div>
    <div class="content">
      <div class="left">
        <el-avatar :src="avatarUrl" size="large"></el-avatar>
        <h2>{{ nickname }}</h2>
        <p>{{ account }}</p>
        <div class="buttons">
          <el-button type="primary" @click="connectAccount('niuke')">连接牛客</el-button>
          <el-button type="primary" @click="openLoginDialog">连接洛谷</el-button>
          <el-button type="primary" @click="connectAccount('leetcode')">连接力扣</el-button>
          <el-button type="danger" @click="loginout">退出账号</el-button>
        </div>
      </div>
      <div class="right">
        <h3>已关联账号</h3>
        <ul>
          <li v-for="(account, index) in linkedAccounts" :key="index">{{ account.name }}: {{ account.url }}</li>
        </ul>
      </div>
    </div>

    <!-- 登陆注册对话框 -->
    <el-dialog title="连接洛谷账号" :visible.sync="loginDialogVisible">
      <el-form :model="loginForm">
        <el-form-item label="账号">
          <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.password" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-input v-model="loginForm.captcha" placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="12">
              <img :src="captchaUrl" @click="fetchCaptcha" alt="验证码" class="captcha-img" />
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="loginDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitLogin">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import {
    config
  } from '../utils/constant.js'
  export default {
    data() {
      return {
        avatarUrl: 'https://via.placeholder.com/150', // 替换为实际头像链接
        nickname: '你的昵称',
        account: '账号名称',
        linkedAccounts: [],
        loginDialogVisible: false,
        loginForm: {
          username: '',
          password: '',
          captcha: ''
        },
        captchaUrl: '' // 验证码图片的URL
      };
    },
    methods: {
      loginout() {
        this.deleteCookie('access_token');
        this.deleteCookie('refresh_token');

        // Clear local storage/session storage
        localStorage.clear();
        sessionStorage.clear();
        window.location.href="http://localhost:8080/"
      },
      deleteCookie(name) {

        // 设置 Cookie 的值为空，并将过期时间设置为过去的一个时间点
        document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;';
      },
      connectAccount(type) {
        let url = '';
        switch (type) {
          case 'niuke':
            url = 'https://www.nowcoder.com/profile/your-profile';
            break;
          case 'luogu':
            url = 'https://www.luogu.com.cn/user/your-profile';
            break;
          case 'leetcode':
            url = 'https://leetcode.com/your-profile/';
            break;
        }
        this.linkedAccounts.push({
          name: type,
          url
        });
      },
      openLoginDialog() {
        this.loginDialogVisible = true;
        this.fetchCaptcha(); // 获取验证码
      },
      fetchCaptcha() {
        // 模拟获取验证码的请求
        // 实际实现中，这里会是一个API请求，获取验证码URL
        this.captchaUrl = 'https://via.placeholder.com/100x40?text=1234'; // 这是一个占位图片
      },
      submitLogin() {
        // 提交登录表单的逻辑
        // 这里可以调用API进行登录验证
        console.log('账号:', this.loginForm.username);
        console.log('密码:', this.loginForm.password);
        console.log('验证码:', this.loginForm.captcha);
        this.loginDialogVisible = false;
      }
    }
  };
</script>

<style scoped>
  .home-page {
    background-image: url('../assets/bg2.png');
    /* 替换为实际背景图片路径 */
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .content {
    width: 80%;
    display: flex;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .left,
  .right {
    flex: 1;
    padding: 20px;
  }

  .left {
    text-align: center;
  }

  .buttons {
    margin-top: 20px;
  }

  .captcha-img {
    cursor: pointer;
    border-radius: 4px;
  }
</style>